<template>
  <view class="region-picker-overlay" v-if="visible" @click="handleCancel">
    <view class="region-picker-container" @click.stop>
      <!-- 头部 -->
      <view class="region-picker-header">
        <!-- 面包屑导航 -->
        <view class="breadcrumb">
          <text 
            v-for="(item, index) in breadcrumbPath" 
            :key="index"
            class="breadcrumb-item"
            :class="{ 'active': index === breadcrumbPath.length - 1 }"
            @click="goToLevel(index)"
          >
            {{ item }}
            <text v-if="index < breadcrumbPath.length - 1" class="separator">></text>
          </text>
        </view>
        
        <!-- 确定按钮 -->
        <text class="confirm-btn" :class="{ 'disabled': !canConfirm }" @click="handleConfirm">确定</text>
      </view>
      
      <!-- 地区列表 -->
      <view class="region-picker-content">
        <scroll-view 
          class="region-list" 
          scroll-y="true"
        >
          <view 
            v-for="(item, index) in currentOptions" 
            :key="index"
            class="region-item"
            :class="{ 'active': selectedIndex === index }"
            @click="selectRegion(item, index)"
          >
            <text class="region-name">{{ item.name }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RegionPicker',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 地区数据 - 5个省份，每个省份3个市，每个市3个区
      regionData: [
        {
          name: '北京',
          children: [
            {
              name: '东城区',
              children: [
                { name: '东华门街道' },
                { name: '景山街道' },
                { name: '交道口街道' }
              ]
            },
            {
              name: '西城区',
              children: [
                { name: '西长安街街道' },
                { name: '新街口街道' },
                { name: '月坛街道' }
              ]
            },
            {
              name: '朝阳区',
              children: [
                { name: '建外街道' },
                { name: '朝外街道' },
                { name: '呼家楼街道' }
              ]
            }
          ]
        },
        {
          name: '上海',
          children: [
            {
              name: '黄浦区',
              children: [
                { name: '南京东路街道' },
                { name: '外滩街道' },
                { name: '半淞园路街道' }
              ]
            },
            {
              name: '徐汇区',
              children: [
                { name: '徐家汇街道' },
                { name: '天平路街道' },
                { name: '湖南路街道' }
              ]
            },
            {
              name: '长宁区',
              children: [
                { name: '华阳路街道' },
                { name: '江苏路街道' },
                { name: '新华路街道' }
              ]
            }
          ]
        },
        {
          name: '广东',
          children: [
            {
              name: '深圳市',
              children: [
                { name: '南山区' },
                { name: '福田区' },
                { name: '罗湖区' }
              ]
            },
            {
              name: '广州市',
              children: [
                { name: '天河区' },
                { name: '越秀区' },
                { name: '海珠区' }
              ]
            },
            {
              name: '珠海市',
              children: [
                { name: '香洲区' },
                { name: '斗门区' },
                { name: '金湾区' }
              ]
            }
          ]
        },
        {
          name: '浙江',
          children: [
            {
              name: '杭州市',
              children: [
                { name: '西湖区' },
                { name: '上城区' },
                { name: '下城区' }
              ]
            },
            {
              name: '宁波市',
              children: [
                { name: '海曙区' },
                { name: '江北区' },
                { name: '北仑区' }
              ]
            },
            {
              name: '温州市',
              children: [
                { name: '鹿城区' },
                { name: '龙湾区' },
                { name: '瓯海区' }
              ]
            }
          ]
        },
        {
          name: '江苏',
          children: [
            {
              name: '南京市',
              children: [
                { name: '玄武区' },
                { name: '秦淮区' },
                { name: '建邺区' }
              ]
            },
            {
              name: '苏州市',
              children: [
                { name: '姑苏区' },
                { name: '虎丘区' },
                { name: '吴中区' }
              ]
            },
            {
              name: '无锡市',
              children: [
                { name: '梁溪区' },
                { name: '锡山区' },
                { name: '惠山区' }
              ]
            }
          ]
        }
      ],
      currentLevel: 0,
      currentOptions: [],
      selectedPath: [],
      selectedIndex: 0
    }
  },
  computed: {
    breadcrumbPath() {
      return this.selectedPath;
    },
    canConfirm() {
      // 只有选择到最后一级（区/街道）才能确定
      return this.selectedPath.length === 3;
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.initData();
      }
    },
    value: {
      handler(newVal) {
        if (newVal) {
          this.parseRegion(newVal);
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.currentLevel = 0;
      this.currentOptions = this.regionData;
      this.selectedPath = [];
      this.selectedIndex = 0;
    },
    
    parseRegion(regionString) {
      if (!regionString) return;
      
      const parts = regionString.split(' ');
      this.selectedPath = parts;
      this.currentLevel = parts.length - 1;
      
      // 根据路径找到当前选项
      let currentData = this.regionData;
      for (let i = 0; i < parts.length - 1; i++) {
        const part = parts[i];
        const found = currentData.find(item => item.name === part);
        if (found && found.children) {
          currentData = found.children;
        }
      }
      
      this.currentOptions = currentData;
      const lastPart = parts[parts.length - 1];
      const index = currentData.findIndex(item => item.name === lastPart);
      this.selectedIndex = index >= 0 ? index : 0;
    },
    
    selectRegion(item, index) {
      this.selectedIndex = index;
      
      // 更新路径
      const newPath = [...this.selectedPath.slice(0, this.currentLevel), item.name];
      this.selectedPath = newPath;
      
      if (item.children && item.children.length > 0) {
        // 还有下一级
        this.currentLevel++;
        this.currentOptions = item.children;
        this.selectedIndex = 0;
      } else {
        // 已经到最后一级
        this.selectedPath = newPath;
      }
    },
    
    goToLevel(level) {
      if (level >= this.selectedPath.length) return;
      
      this.currentLevel = level;
      this.selectedPath = this.selectedPath.slice(0, level + 1);
      
      // 重新计算当前选项
      let currentData = this.regionData;
      for (let i = 0; i < level; i++) {
        const part = this.selectedPath[i];
        const found = currentData.find(item => item.name === part);
        if (found && found.children) {
          currentData = found.children;
        }
      }
      
      this.currentOptions = currentData;
      this.selectedIndex = 0;
    },
    
    handleCancel() {
      this.$emit('cancel');
    },
    
    handleConfirm() {
      if (!this.canConfirm) {
        uni.showToast({
          title: '请选择完整的地区',
          icon: 'none'
        });
        return;
      }
      
      const selectedRegion = this.selectedPath.join(' ');
      this.$emit('confirm', selectedRegion);
    }
  }
}
</script>

<style lang="scss" scoped>
.region-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.region-picker-container {
  background-color: #fff;
  border-radius: 20rpx;
  width: 600rpx;
  max-height: 800rpx;
  overflow: hidden;
  position: relative;
}

.region-picker-header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: #f8f8f8;
  border-bottom: 1rpx solid #f0f0f0;
  
  .breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    .breadcrumb-item {
      font-size: 28rpx;
      color: #999;
      cursor: pointer;
      
      &.active {
        color: #ff4444;
        font-weight: bold;
      }
      
      .separator {
        margin: 0 10rpx;
        color: #999;
      }
    }
  }
  
  .confirm-btn {
    font-size: 32rpx;
    color: #007aff;
    font-weight: 500;
    
    &.disabled {
      color: #ccc;
    }
  }
}

.region-picker-content {
  height: 400rpx;
  position: relative;
}

.region-list {
  height: 100%;
  padding: 0 20rpx;
}

.region-item {
  height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.active {
    .region-name {
      color: #ff4444;
      font-weight: bold;
    }
  }
  
  .region-name {
    font-size: 30rpx;
    color: #333;
  }
}
</style> 